<template>
  <div class="projectList">
    <nav_bar title='我的项目' background='#fff' :back="true"  @back="handlerGobackClick"></nav_bar>
    <div class="header"></div>
    <!-- <div class="newProjcet" @click="newProject">
      新建项目
    </div> -->
    <div class="itemList">
      <div class="swiper_wrapper">
        <div class="item_name">
          <van-icon name="arrow-left" custom-class="arrow" @click="lastPage" />
          <span class="item_name_content">{{projectName}}</span>
          <van-icon name="arrow" custom-class="arrow" @click="nextPage" />
        </div>
        <swiper @animationfinish="getSwiperItem" :current="currentIndex" class="swiper" >
          <swiper-item class="item"  v-for="(item,index) of projectList" :key="index">
            <div class="content">
              <div class="item_desc"><span>收货方式&nbsp;&nbsp;&nbsp;</span><span>{{item.receipt_way}}</span></div>
              <div class="item_desc"><span>所属公司&nbsp;&nbsp;&nbsp;</span><span>{{item.company_name}}</span></div>
              <div class="item_desc"><span>地理位置&nbsp;&nbsp;&nbsp;</span><span>{{item.address?item.address:''}}</span></div>
              <div class="item_desc"><span>详情描述&nbsp;&nbsp;&nbsp;</span><span>{{item.desc?item.desc:''}}</span></div>
            </div>
            <!-- <div class="btn">
              <div @click="delProjectDetail(item.id)">删除</div>
              <div @click="toAdd(item)">编辑</div>
            </div> -->
          </swiper-item>
      </swiper>

      <div class="penIcon_wrapper">
        <img src="../../../static/images/icon/edit.png" alt="" @click="showPopup(currentItem)" class="penIcon">
      </div>
      </div>
    </div>
    <van-popup
            :show="showPopupFlag"
            position="center"
            :overlay="true"
            @close="closePopup"
          >
          <div style="width:80vws">
            <newProjectPop ref="newProjectPop" @closePop="upDataList"></newProjectPop>
          </div>
    </van-popup>
    <div class="addIcon_wrapper">
      <img src="../../../static/images/icon/add4.png" alt="" @click="showPopup('')" class="addIcon">
    </div>
  </div>
</template>
<script>
import {mapActions} from 'vuex';
import newProjectPop from '@/components/newProjectPop'
export default {
  data() {
    return {
      projectList:'',
      projectName:'',//
      currentIndex:0,//当前swiper的索引
      currentItem:'',
      showPopupFlag:false
    }
  },
  components:{
    newProjectPop
  },
  methods: {
    ...mapActions([
      'setProjectDetail'
    ]),
    closePopup(){
          this.showPopupFlag=false;
          this.setProjectDetail('');
          this.$refs.newProjectPop.initData()
      },
    upDataList(){
      this.showPopupFlag=false;
      this.setProjectDetail('');
      this.$refs.newProjectPop.initData();
      this.getProjectList()
    },
    handlerGobackClick(){
      wx.navigateBack({
        delta: 1
      })
    },
    showPopup(item){
      this.setProjectDetail(item);
      this.$refs.newProjectPop.getCompany()
      
      this.showPopupFlag=true
    },

    async delProjectDetail(id){
      const select=await this.$currency.showModal('是否删除项目','')
          if(select){
            const userToken=wx.getStorageSync('userToken')
            const res=await this.$request.postData('/ucenter/deleteProject',{
              project_id:id,
              user_token:userToken
            })
            if(res.data.level=='success'){
              this.$currency.showToast(res.data.message)
              setTimeout(()=>{
                this.getProjectList()
              },1500)
            }else{
              this.$currency.showToast(res.data.message)
            }
            
          }
    },
     async getProjectList(){
      const userToken=wx.getStorageSync('userToken')

      const res=await this.$request.getData('/ucenter/getUserProject',{
        user_token:userToken
      })
      if(res.data.level=='success'){
        this.projectList=res.data.data;
        if(this.projectList.length>0){
          this.projectName=this.projectList[0].name;
          this.currentItem=this.projectList[0];
        }
        wx.stopPullDownRefresh()
      }
      },
      getSwiperItem(e){
        //获取滑动页
          let index=e.target.current;
          this.currentIndex=index;
          this.projectName=this.projectList[index].name;
          this.currentItem=this.projectList[index];

      },
      lastPage(){
        //上一页
        if(this.currentIndex==0){
          this.currentIndex=this.projectList.length-1
        }else{
          this.currentIndex=--this.currentIndex;
        }
      },
      nextPage(){
        //下一页
        if(this.currentIndex<this.projectList.length-1){
          this.currentIndex=++this.currentIndex 
        }else{
          this.currentIndex=0
        }
        
      }
  },
  onShow(options){
    this.getProjectList()
  },
  onPullDownRefresh() {
    this.getProjectList()
  },
  
}
</script>
<style lang="scss" scoped>
$base-color:#f28b00;
//头部
// .header{
//     display: flex;
//     padding-top:10px;
//     justify-content: space-around;
//     width: 100%;
//     height: 160px;
//     position: fixed;
//     background: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/steel/icon/myProject.jpg');
//     background-size:100% 100%;
//     color:#fff; 
//     z-index: 99;
// }
.itemList{
    
    // top:120px;
    top:60px;
    padding:0 10px;
    font-size: 18px;
    position: relative;
    z-index: 100;
    background:#fff;
    overflow: hidden;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    .swiper_wrapper{
      margin-top:30px;
      border-radius: 70px;
      color:#000;
      padding:10px;
      border:1px solid $base-color;
      
      .penIcon_wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top:30px;
        .penIcon{
        width: 30px;
        height: 30px;
        margin: 0 auto;
        display: inline-block;
      }
      }
      .swiper{
        min-height: 200px;
      }
      
    }
  }
  .projectList{
    font-size: 14px;
  }
  .content{
    width: 100%;
  }
  .item{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item_name{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    
  }
  .item_name_content{
    margin: 0 30px;
    font-weight: 600;
    color:$base-color;
  }
  .item_desc{
    margin-top:10px;
    display: flex;
    span:last-child{
      display: inline-block;
      max-width:220px;
    }
  }
  .item_way{
    margin-top:10px;
    width: 100%
  }
  // .btn{
  //   margin-top:20px; 
  //   width: 100%;
  //   display: flex;
  //   flex-direction: row-reverse;
  //   align-items: center;
  // }

  // .btn>div{
  //   background-color:  #f56c6c;
  //   border-color: #fde2e2;
  //   color: #fef0f0;
  //   border-radius: 7px;
  //   text-align: center;
  //   margin-right: 10px;
  //   padding:5px 10px;
    
  //   }

  //新建项目
  .newProjcet{
    color:#fff;
    font-weight: 600;
    font-size: 16px;
    border-radius: 10px;
    background: #23b6ac;
    text-align: center;
    padding:10px 0;
  }
  .addIcon_wrapper{
    position: fixed;
    bottom:10px;
    width: 100%;
    display: flex;
    justify-content: center;
    .addIcon{
        width: 44px;
        height: 44px;
        margin: 0 auto;
        display: inline-block;
      }
  }
  
</style>
<style >
  .arrow{
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
</style>


